<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <title>Title</title>
</head>
<style>
    .hidden{
        display: none;
    }
</style>
<body>
<div class="btn-video" data-status="off">
    <img src="checking.png">
    <img class="hidden" src="checked.png">
    &nbsp;录播
</div>
<!--库函数-->
<script type="text/javascript">
    /*checkbox通用方法*/
    function checkbox(obj){
        var status =obj.attr("data-status");
        var order ={"on":["off","","hidden"],"off":["on","hidden",""]};
        obj.attr("data-status",order[status][0]);
        obj.find("img").eq(0).attr("class",order[status][1]);
        obj.find("img").eq(1).attr("class",order[status][2]);
    }

</script>
<!--使用库函数-->
<script type="text/javascript">
    $(".btn-live,.btn-video").click(function(){
        checkbox($(this));
    });
</script>
</body>
</html>